<template>
  <div class="box-all">
    <el-dialog width="800px" top="5%" title="入库历史" v-model="dialogFormVisible" :draggable="true" @close="dialogClose">
      <el-table :height="tableHeight" :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
        :cell-style="{fontSize:'14px',color:'#7b7b7d'}" :data="tableData" stripe>
        <el-table-column type="index" width="55" label="序号" align="center" />
        <el-table-column prop="goodsName" label="商品名称" align="center">
          <template v-slot="scope">
            {{ scope.row.goodsName || '' }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="入库时间" align="center">
          <template v-slot="scope">
            {{ scope.row.createTime ? getDateTime(scope.row.createTime)[6] : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="createUserName" label="操作人" align="center">
          <template v-slot="scope">
            {{ scope.row.createUserName || '' }}
          </template>
        </el-table-column>
        <el-table-column prop="cardNumList" label="个数" align="center" min-width="100">
          <template v-slot="scope">
            <el-tooltip>
              <template #content>
                <div v-for="item in scope.row.cardNumList && scope.row.cardNumList" :key="item">
                  {{ item }}
                </div>
              </template>
              {{ numFormat(scope.row.cardNumList && scope.row.cardNumList.length) || '' }}
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="operations" label="操作" align="center" width="160">
          <template v-slot="scope">
            <el-link style="font-size:14px;" type="primary" @click="downFile(scope.row.recordId)">下载入库详情</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-footer">
        <el-pagination style="margin-left:auto;" v-model:currentPage="page" v-model:page-size="size"
          :page-sizes="[10, 20, 50, 100]" small :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false">
            我知道了
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { getWindowWidthAndHeight, warningDeal, getDateTime, numFormat, BlobDownLoad } from '@/utils/utils'
import api from '../api'
export default {
  setup() {
    const state = reactive({
      page: 1,
      size: 10,
      total: 0,
      tableHeight: 0,
      tableData: [],
      dialogFormVisible: false,
    })

    function dialogShow() {
      let winHeight = getWindowWidthAndHeight()
      state.tableHeight = winHeight.windowHeight - 340
      getTableData()
      state.dialogFormVisible = true
    }

    function getTableData() {
      const obj = {
        optType: 1,
        page: state.page,
        size: state.size,
      }
      api.cardInventoryRecord(obj).then(res => {
        if (res.code == '200') {
          state.tableData = res.data.records
          state.total = res.data.total
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function handleCurrentChange(e) {
      state.page = e
      getTableData()
    }

    function handleSizeChange(e) {
      state.size = e
      getTableData()
    }

    function downFile(recordId) {
      const obj = {
        recordId
      }
      api.cardInventoryExportRecord({ ...obj, responseType: "blob" }).then(res => {
        const _fileName = decodeURIComponent(res.headers['content-disposition'].split(';')[1].split('=')[1])
        BlobDownLoad(res, _fileName)
      }).catch(err => {
        console.log(err)
      })
    }

    return {
      ...toRefs(state),
      dialogShow,
      getDateTime,
      numFormat,
      handleCurrentChange,
      handleSizeChange,
      downFile,
    }
  }
}
</script>

<style lang="scss" scoped>
.table-footer {
  display: flex;
  margin-top: 10px;
}
:deep(.el-popper) {
  max-height: 300px !important;
  overflow-y: auto !important;
}
</style>